<template>
    <el-row class="home" :gutter="20">
        <el-col :span="8" style="margin-top: 20px">
            <el-card shadow="hover">
                <div class="user">
                    <img :src="userImg" alt="">
                    <div class="userinfo">
                        <p class="name">Admin</p>
                        <p class="access">超级管理员</p>
                    </div>
                </div>
                <div class="login-info">
                    <p>上次登录时间：<span>2022-09-02</span></p>
                    <p>上次登录地点：<span>无锡</span></p>
                </div>
            </el-card>
            <el-card style="margin-top: 20px; height: 460px">
                <el-table :data="tableData">
                    <el-table-column v-for="(value, key) in tableLabel" :label="value" :key="key" :prop="key">
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="16">
            <div class="num">
                <el-card v-for="item in countData" :key="item.name" style="margin-top: 20px"
                    :body-style="{ display: 'flex', padding: 0 }">
                    <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color }"></i>
                    <div class="detail">
                        <p class="num">¥{{ item.value }}</p>
                        <p class="txt">{{ item.name }}</p>
                    </div>
                </el-card>


            </div>
            <el-card style="height: 280px; width: 100%">
                <div style="height: 280px" ref="echarts_sales"></div>
            </el-card>
            <div class="graph">
                <el-card style="height: 245px;">
                    <div style="height: 240px;" ref="echarts_user"></div>
                </el-card>
                <el-card style="height: 245px;">
                    <div style="height: 240px;" ref="echarts_sale_pie"></div>
                </el-card>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import * as echarts from 'echarts'
export default {

    name: 'home',
    data() {
        return {
            userImg: require('../../assets/images/user.png'),
            tableData: [],
            countData: [
                {
                    name: "今日支付订单",
                    value: 1234,
                    icon: "success",
                    color: "#2ec7c9",
                },
                {
                    name: "今日收藏订单",
                    value: 210,
                    icon: "star-on",
                    color: "#ffb980",
                },
                {
                    name: "今日未支付订单",
                    value: 1234,
                    icon: "s-goods",
                    color: "#5ab1ef",
                },
                {
                    name: "本月支付订单",
                    value: 1234,
                    icon: "success",
                    color: "#2ec7c9",
                },
                {
                    name: "本月收藏订单",
                    value: 210,
                    icon: "star-on",
                    color: "#ffb980",
                },
                {
                    name: "本月未支付订单",
                    value: 1234,
                    icon: "s-goods",
                    color: "#5ab1ef",
                },
            ],
            orderData: {
                data: [],
                date: []
            },
            tableLabel: {
                id: '序号',
                curse: "课程",
                today_buy: '今日购买',
                month_buy: '本月购买',
                total_buy: '总购买'
            }

        }
    },
    mounted() {
        this.getPhoneList()
        this.drawCharts()
    },
    methods: {
        getPhoneList() {
            this.$axios.get('/phone')
                .then(res => {
                    // console.log((res))
                    this.tableData = res.data
                })
                .catch(err => {
                    console.log(err)
                })
        },

        drawCharts() {
            // 折线图
            this.$axios.get('/sales')
                .then(res => {
                    const all_data = res.data
                    // console.log(data)
                    const date = []
                    const data = []
                    for (var i = 0; i < all_data.length; i++) {
                        date.push(all_data[i].date)
                        const { apple, vivo, oppo, meizu, xiaomi, sansung } = all_data[i]
                        const datai = { apple, vivo, oppo, meizu, xiaomi, sansung }
                        data.push(datai)

                    }

                    const keyArray = Object.keys(data[0])
                    const series = []
                    keyArray.forEach(key => {
                        series.push({
                            name: key,
                            data: data.map(item => item[key]),
                            type: 'line'
                        })
                    })
                    // console.log(series)

                    const options = {
                        xAxis: {
                            data: date,
                            type: 'category'
                        },
                        yAxis: {},
                        legend: {
                            data: keyArray
                        },
                        series
                    }
                    const chart_line = echarts.init(this.$refs.echarts_sales)
                    chart_line.setOption(options)
                })
                .catch(err => {
                    console.log(err)
                })

            // 用户柱状图
            this.$axios.get('/user_status')
                .then(res => {
                    const data = res.data

                    const userOptions = {
                        legend: {
                            textStyle: { color: '#333' }
                        },
                        grid: { leff: '20%' },
                        tooltip: { trigger: "axis" },
                        xAxis: {
                            type: 'category',
                            data: data.map(item => item.weekday),
                            axisLine: {
                                lineStyle: {
                                    color: "#17b3a3"
                                }
                            },
                            axisLabel: {
                                interval: 0,
                                color: "#333",
                            }
                        },
                        yAxis: [{
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: "#17b3a3"
                                }
                            }
                        }],
                        color: ["#2ec7c9", "#b6a2de"],
                        series: [
                            {
                                name: '新增用户',
                                data: data.map(item => item.new),
                                type: 'bar'
                            },
                            {
                                name: '活跃用户',
                                data: data.map(item => item.active),
                                type: 'bar'
                            }
                        ]
                    }
                    const chart_bar1 = echarts.init(this.$refs.echarts_user)
                    chart_bar1.setOption(userOptions)
                })

            // 饼图
            this.$axios.get('/phone')
                .then(res => {
                    const data = res.data
                    // console.log(data)
                    const key = data.map(item => item.curse)
                    const month_buy = data.map(item => item.month_buy)
                    const vedioData = key.map((name, i) => ({name, value: month_buy[i]}))
                    // console.log(vedioData)
                    
                    const options = {
                        tooltip: {
                            trigger: 'item'
                        },
                        color: [
                            "#0f78f4",
                            "#dd536b",
                            "#9462e5",
                            "#a6a6a6",
                            "#e1bb22",
                            "#39c362",
                            "#3ed1cf",
                        ],
                        series: [
                            {
                                data: vedioData,
                                type: 'pie'
                            }


                        ],
                    }

                    const chart_pie = echarts.init(this.$refs.echarts_sale_pie)
                    chart_pie.setOption(options)
                })


        }
    }
}
</script>